<template>
	<view>
		<!-- 选择收货地址的盒子 -->
		<view class="address-choose-box" v-if="!address.cityName">
			<button @click="chooseAddress" type="primary" size="mini" class="btnChoose">请选择收货地址+</button>
		</view>
		<!-- 渲染收货信息的盒子 -->
		<view class="shouffom" v-else @click="chooseAddress">
			<view class="shoutop">
				<view class="shout-left">
					<view class="name">收货人: {{address.userName}}</view>
				</view>
				<view class="shout-right">
					<view class="dianjh">电话: {{address.telNumber}}</view>
					<uni-icons type="arrowright" size="16"/>
				</view>
			</view>
			<view class="shou-bottm">
				<view class="shouhdiz">收货地址: {{address.cityName}}</view>
			</view>
		</view>
		<!-- 底部的边框线 -->
		<image class="imags" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Felement%2F40077%2F8797.png_1200.png&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646882671&t=64df04ec601d4246ec176bebe90021f6" />
	</view>
</template>

<script>
import { mapState } from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {
			};
		},
		computed:{
			...mapState({address:state=>state.cart.cartAddress})
		},
		methods:{
			//点击选择地址事件
			async chooseAddress(){
				let res = await uni.chooseAddress().catch(err=>err)
				if(res[0] == null || res[1].errMsg == 'chooseAddress:ok'){
					let arr = res.map(item=>{
						if(item!=null){
							return{
								cityName:`${item.provinceName}${item.cityName}${item.countyName}${item.detailInfo}`,
								telNumber:item.telNumber,
								userName:item.userName
							}
						}
					})
					this.$store.commit('addcartAdds',arr[1])
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
.address-choose-box{
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.imags{
	width: 100%;
	display: block;
	height: 15px;
}
.shouffom{
	padding: 20px 10px;
	font-size: 14px;
	font-weight: 200;
	.shoutop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		.shout-left{
			.name{}
		}
		.shout-right{
			display: flex;
			align-items: center;
			.dianjh{
				margin-right: 5px;
			}
		}
	}
	.shou-bottm{
		white-space: nowrap;
	}
}
</style>
